<div ng-controller="largeClassCtrl">
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
      <div class="databox radius-bordered databox-shadowed databox-graded">
          <div class="databox-left bg-orange">
              <div class="databox-piechart">
                  <span class="white font-200"><i class="fa fa-money"></i></span>
              </div>
          </div>
          <div class="databox-right">
              <span class="databox-number orange">{{recordMoney.recordMoneyIn | currency }}</span>
              <div class="databox-text darkgray">{{selectYear}}年{{className}}总进项金额</div>
              <div class="databox-stat orange radius-bordered">
                  <i class="stat-icon icon-lg fa fa-shopping-cart"></i>
              </div>
          </div>
      </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="databox radius-bordered databox-shadowed databox-graded">
        <div class="databox-left bg-azure">
            <div class="databox-piechart">
              <span class="white font-200"><i class="fa fa-money"></i></span>
            </div>
        </div>
        <div class="databox-right">
            <span class="databox-number azure">{{recordMoney.recordMoneyOut | currency}}</span>
            <div class="databox-text darkgray">{{selectYear}}年{{className}}总销项金额</div>
            <div class="databox-state bg-azure">
                <i class="fa fa-sign-out"></i>
            </div>
        </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
      <div class="databox radius-bordered databox-shadowed databox-graded">
          <div class="databox-left bg-yellow">
              <div class="databox-piechart">
                  <span class="white font-200"><i class="fa fa-money"></i></span>
              </div>
          </div>
          <div class="databox-right">
              <span class="databox-number" style="color:#f4b400">{{recordMoney.vatMoney | currency }}</span>
              <div class="databox-text darkgray">{{selectYear}}年{{className}}总纳税金额</div>
              <div class="databox-stat yellow radius-bordered">
                  <i class="stat-icon icon-lg fa fa-usd"></i>
              </div>
          </div>
      </div>
  </div>
  <div class="col-xs-12 col-md-12">
      <div class="widget">
          <div class="widget-header  with-footer">
              <span class="widget-caption">
                记录表
              </span>
              <span class="selectSpanAll">
                <span ng-click="changeType(2)" ng-class="{true: 'active', false: ''}[recordType==2]" class="selectSpan">总记录</span>
                <span ng-click="changeType(0)" ng-class="{true: 'active', false: ''}[recordType==0]" class="selectSpan">进项记录</span>
                <span ng-click="changeType(1)" ng-class="{true: 'active', false: ''}[recordType==1]" class="selectSpan">销项记录</span>
              </span>
              <select ng-init="selectYear = years[years.length-1]" ng-model="selectYear" ng-options="x for x in years">
              </select>
          </div>

          <div class="widget-body" style="height: auto;">

            <div class="flip-scroll">
              <div class="form-group" style="width:330px;float:left;">
                  <div class="controls">
                      <div class="input-group">
                          <span style="cursor:pointer" ng-click="checkByDate(1)" class="input-group-addon">
                              <i class="fa fa-calendar"></i>
                          </span>
                          <input ng-change="checkByDate()" ng-keyup="keyupDate()" type="text" ng-model="checkrecordDate" placeholder="按时间段查询发票记录" class="form-control" id="reservation">
                          <span style="cursor:pointer" ng-click="checkByDate()" class="input-group-addon">
                              点击查询
                          </span>
                      </div>

                  </div>
              </div>
                  <table class="table table-bordered table-striped table-condensed flip-content">
                      <thead class="flip-content bordered-palegreen">
                          <tr>
                              <th>
                                  序号
                              </th>
                              <th>
                                  商品名称
                              </th>
                              <!-- <th>
                                  商品大类别
                              </th> -->
                              <th class="numeric">
                                  商品小类别
                              </th>
                              <th class="numeric">
                                  商品价格
                              </th>
                              <th class="numeric">
                                  商品增值税数额
                              </th>
                              <th class="numeric">
                                  商品数量
                              </th>
                              <th class="numeric">
                                  商品单位
                              </th>
                              <th class="numeric" ng-if="recordType==2">
                                  类型
                              </th>
                              <th class="numeric">
                                  录入时间
                              </th>
                              <th class="numeric">
                                  操作
                              </th>
                          </tr>
                      </thead>
                      <tbody>
                        <tr ng-repeat="record in records">
                            <td>
                                {{(currentPage-1)*size+$index+1}}
                            </td>
                            <td>
                              {{record.commodityName}}
                            </td>
                            <!-- <td class="numeric">
                                <a ui-sref="classRecords({classId:{{record.largeClass}},className:'{{record.largeClassName}}'})">{{record.largeClassName}}</a>
                            </td> -->
                            <td>
                              <a ui-sref="smallClassRecords({classId:{{record.smallClassId}},className:'{{record.smallClassName}}',companyId:{{companyId}},companyName:'{{companyName}}'})">{{record.smallClassName}}</a>
                            </td>
                            <td class="numeric">
                              {{record.commodityMoney | currency}}
                            </td>
                            <td class="numeric">
                              {{record.vatMoney | currency}}
                            </td>
                            <td class="numeric">
                              {{record.commodityAmount}}
                            </td>
                            <td class="numeric">
                              {{record.unit}}
                            </td>
                            <td class="numeric" ng-if="recordType==2">
                              {{record.commodityType | commodityType}}
                            </td>
                            <td class="numeric">
                              {{record.commoditDate}}
                            </td>

                            <td class="numeric">
                              <button ng-click="updateRecord(record.commodityId)">修改</button>
                              <button ng-click="delRecord(record.commodityId)">删除</button>
                            </td>
                        </tr>
                      </tbody>
                  </table>
            </div>
            <pagination current-page="currentPage" total-page="totalPage" get-record="getRecord()">
            </pagination>
          </div>
      </div>
  </div>
  <!-- 删除确认弹框 -->
  <div class="modal-preview "  ng-class="showModal?'show':'noshow'">
    <div class="modal modal-primary">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" ng-click="delRecord()" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">删除记录</h4>
          </div>
          <div class="modal-body">
            <p>确认删除这条记录？</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-warning" data-dismiss="modal" ng-click="delRecord()">取消</button>
            <button type="button" class="btn btn-primary" ng-click="sureDelRecord()">确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mask" ng-if="showModal"></div>
  <div class="clear"></div>
</div>
<script>
$(function() {
  $( ".modal-preview" ).draggable();
});
//--Bootstrap Date Range Picker--
      $('#reservation').daterangepicker();
</script>
